<template>
    <div class="monitor-host-index">
        <div class="search-form">
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item label="应用">
                    <el-select 
                        v-model="searchForm.appID"
                        clearable
                        filterable
                        placeholder="搜索应用">
                        <el-option :label="item.label" :value="item.id" v-for="(item, i) in appList" :key="i"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="环境">
                    <el-select clearable v-model="searchForm.envID" placeholder="选择环境">
                        <el-option :label="item.environment_label" :value="item.environment_id" v-for="(item, i) in envList" :key="i"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="集群">
                    <el-select clearable v-model="searchForm.clusterID" placeholder="选择集群">
                        <el-option :label="item.label" :value="item.ID" v-for="(item, i) in clusterList" :key="i"></el-option>
                    </el-select>
                </el-form-item>
                <el-date-picker
                    v-model="searchForm.timeFilter"
                    type="datetimerange"
                    :picker-options="pickerOptions"
                    value-format="timestamp"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right">
                </el-date-picker>
                <el-form-item label="   ">
                    <el-input clearable v-model="searchForm.search" placeholder="关键字"></el-input>
                </el-form-item>
                <el-button type="primary" icon="el-icon-search" @click.native="search()">搜索</el-button>
            </el-form>
        </div>
        <div class="table_sef">
            <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    label="ID/名称">
                    <template slot-scope="scope">
                        {{scope.row.hostName}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="ip"
                    label="IP地址">
                </el-table-column>
                <el-table-column
                    prop="idc"
                    label="资源来源">
                </el-table-column>
                <el-table-column
                    label="创建时间">
                    <template slot-scope="scope">
                        {{format(scope.row.time, 'yyyy-MM-dd HH:mm:ss')}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" >删除</el-button>
                        </template>
                </el-table-column>
            </el-table>
            <div class="app-page-box">
                <el-pagination
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount"
                    :page-sizes="[10,20,50]"
                    :page-size="pageSize"
                    :current-page="currentPage"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { format, addDays } from 'date-fns';

    export default {
        
        components: {
        },
        mounted() {
            
        },
        data() {
            return {
                format,
                selectedToDiff: [],
                activeName: 'hostList',
                searchForm: {
                    appID: '',
                    envID: '',
                    clusterID: '',
                    search: '',
                    timeFilter: ''
                },
                tableData: [
                    {
                        hostName: 1,
                        ip: '172.11.11.1',
                        idc: 'dsdsd',
                        time: 1570691393664
                    }
                ],
                totalCount: 0,
                pageSize: 10,
                currentPage: 1,
                appLoading: false,
                appList: [],
                envList: [],
                clusterList: [],
                pickerOptions: {
                    shortcuts: [{
                        text: '五分钟',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 5 * 60 * 1000);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '十五分钟',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 15 * 60 * 1000);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '三十分钟',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 30 * 60 * 1000);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '一个小时',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '四个小时',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 4 * 3600 * 1000);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '十二个小时',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 12 * 3600 * 1000);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '二十四个小时',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 24 * 3600 * 1000);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '今天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(new Date(`${format(addDays(new Date(), 0), 'YYYY-MM-DD')} 00:00:00`).getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
            };
        },
        watch: {
            'searchForm.appID'(appId) {
                if (appId) {
                    this.fetchEnv(appId);
                }
                this.searchForm.envID = '';
                this.searchForm.clusterID = '';
                this.envList = [];
                this.clusterList = [];
            },
            'searchForm.envID'(envId) {
                if (envId) {
                    this.fetchCluster(this.searchForm.appID, envId);
                    this.searchForm.clusterID = '';
                }
                this.clusterList = [];
            }
        },
        methods: {
            searchHost() {
            },
            search() {
                this.currentPage = 1;
                this.searchHost();
            },
            handleSelectionChange(val) {
                this.selectedToDiff = val;
            },
            handleSizeChange(size) {
                this.pageSize = size;
                this.searchHost();
            },
            handlePageChange(page) {
                this.currentPage = page;
                this.searchHost();
            },
        },
    };
</script>

<style lang="scss">
    .monitor-host-index{
        .table_sef{
            margin-top: 20px;
            .app-page-box{
                display: flex;
                margin-top: 20px;
                .el-pagination{
                    margin: 0 auto;
                }
            }
        }
    }
</style>
